// JS入口
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import moment from 'moment'
import './lib/mui/css/mui.css'
import './lib/mui/css/icons-extra.css'
import '../node_modules/mint-ui/lib/style.css'
import router from './router.js'
import Vuex from 'vuex'
import app from './App.vue'
// import { Header, Swipe, SwipeItem, Button, Lazyload } from 'mint-ui'
// Vue.component(Header.name,Header);
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);

// Vue.use(Lazyload);
import MintUi from 'mint-ui'
Vue.use(MintUi)
Vue.use(VueRouter)
Vue.use(VueResource)
Vue.use(Vuex)
// 安装图片预览插件
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

// 设置请求的根路径
Vue.http.options.root = 'http://www.liulongbin.top:3005';
// 全局设置 post 时候表单 数据格式组织形式  application/x-www-form-urlencoded
Vue.http.options.emulateJSON = true;


// 定义全局的过滤器
Vue.filter('dataFormat', function (dataStr, pattern) {
    return moment(dataStr).format(pattern)
})


// 每次进入网站会调用main.js 然后获取本地存储的购物车数据 并 放入store中
var carData = JSON.parse(localStorage.getItem('car')) || []
// 得到一个数据仓储对象
var store = new Vuex.Store({
    // this.$store.state.***
    // 可以把state想象成 组件中的data，用来存储数据
    // 如果在 组件中，想要访问 store 中的数据，只能通过 this.$store.state.***
    state: {
        // 将购物车中商品的数据 用一个数组存储起来，商品对象
        // { id:商品id, count:购买数量, price: 商品数量, selected:true }
        car: carData
    },
    // this.$store.commit(“方法名”,唯一参数 )
    // 如果要操作store 中的state值，只能通过调用mutations 提供的方法，才能操作对应的数据，不推荐直接操作state中的数据
    // 因为不好定位到错误源
    mutations: {
        // 点击加入购物车，把商品信息 保存到 store 中的car中
        // 1. 如果购物车之前你已经有对应的商品，那么只需要更新数量
        // 2. 如果没有 把商品数据 push到 car中
        addToCar(state,info) {
            // some 检测数组中的每一项，有一项满足就返回true,遇到true就停止循环
            var flag = true;
            state.car.some(item=>{
                if(item.id == info.id) {
                    item.count += parseInt(info.count);
                    flag = false;
                    return true;
                }
            })
            // flag为true表示没找到相同的商品 则把数据push到数组中 
            if(flag) {
                state.car.push(info)
            }
            // 当更新 car 之后，将car数组 存储到本地的localstorage中
            // setInem(键，值)  引用类型 将其转换成json格式
            localStorage.setItem('car',JSON.stringify(state.car));
        },
        updatedGoodsInfo(state,info) {
            state.car.some(item=>{
                if(item.id == info.id) {
                    // 这里修改的是 state 的 car 数据，修改完成之后 将car 保存到本地存储
                    item.count = parseInt(info.count)
                    return true;
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        removeShopcar(state,id){
            // 根据id 从store 中的购物车中删除对应的那条商品数据

            state.car.some((item,i)=>{
                if(item.id == id) {
                    state.car.splice(i,1);
                    return true;
                }
            })
            // 将删除后的数据 同步到本地存储中
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        updateGoodsSelected(state,info){
            state.car.forEach(item=>{
                if(item.id == info.id) {
                    item.selected = info.selected
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))
        }
    },
    getters: {
        // this.$store.getters.***
        // 获取car中所有对象的count的和，在app组件中插值
        getAllCount(state){
            var c = 0;
            state.car.forEach(item=>{
                c += parseInt(item.count);
            })
            return c;
        },
        getGoodCount(state){
            var o = [];
            state.car.forEach(item=>{
                o[item.id] = item.count;
            })
            return o;
        },
        getGoodsInventory(state) {
            var i = [];
            state.car.forEach(item=>{
                i[item.id] = item.inventory
            })
            return i;
        },
        getGoodsSelected(state){
            var s = [];
            state.car.forEach(item=>{
                s[item.id] = item.selected
                s.push(item)
            })
            return s;
        },
        getGoodsCountAndAmout(state) {
            var o ={
                count: 0,
                amount: 0
            }
            state.car.forEach(item=>{
                if(item.selected) {
                    o.count += item.count;
                    o.amount += item.price * item.count
                }
            })
            return o;
        }
    }
})



new Vue({
    el: '#app',
    render: c => c(app),
    router,  // 把路由对象挂载到vm实例上
    store   // 将vuex创建的 store 挂载到 vue实例上
})